<cds-modal
  size="md"
  class="quick-switcher-modal"
  id="quick-switcher-modal"
  [closable]="false"
  [hidden]="true"
  (keyup.enter)="onEnter()"
  (keyup)="onKeyUp($event)"
  (keydown)="onKeyDown($event)"
  (closeChange)="toggleQuickSwitcher()">
  <cds-modal-content>
    <input
      class="filter-input"
      clrInput
      placeholder="Let's go somewhere"
      name="input"
      [(ngModel)]="input"
      (ngModelChange)="onInputChange($event)"
      size="37.5"
    />
    <table class="table table-noborder destinations">
      <thead *ngIf="searchingNamespace">
      <tr>
        <th>Searching Namespaces</th>
      </tr>
      </thead>
      <overlay-scrollbars>
        <tbody>
        <tr
          *ngFor="
            let destination of filteredDestinations;
            trackBy: identifyDestinationItem;
            index as index
          "
          (mouseover)="activeIndex = index"
          (click)="onEnter($event)"
          [class.destination-active]="index == activeIndex"
          [attr.aria-label]="destination.title"
        >
          <td>{{ destination.title }}</td>
          <td>{{ destination.type }}</td>
        </tr>
        </tbody>
      </overlay-scrollbars>
    </table>
  </cds-modal-content>
  <cds-modal-actions>
    <div cds-layout="horizontal gap:sm align:left">
      <pre>{{ helperText}}<code>!</code></pre>
    </div>
  </cds-modal-actions>
</cds-modal>
